import time
import dash
from dash import html, dcc
import feffery_antd_components as fac
import feffery_utils_components as fuc
from dash.dependencies import Input, Output, ClientsideFunction

app = dash.Dash(
    __name__,
    external_scripts=[
        'https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js'
    ],
    suppress_callback_exceptions=True
)

# 示例数据
mock_data = [{'company_name': "上海张江生物技术有限公司", 'company_type': "制药", 'country': "中国", 'province': "江苏省",
              'address': "江苏省南通市海门区三厂街道青化路18号", 'size': "100-499人", 'legal_representative': "刘广洛"}]


mock_graph_nodes = [
    {"id": 0, "name": "业务系统", "category": '业务系统', "value": 5},
    {"id": 1, "name": "数据源", "category": '数据源', "value": 15},
    {"id": 2, "name": "数据库", "category": '数据库', "value": 55}
]

mock_graph_links = [
    {"source": "0", "target": "1", "type": "关系"},
    {"source": "0", "target": "2", "type": "关系"},
    {"source": "0", "target": "3", "type": "关系"}
]

app.layout = html.Div(
    html.Div(
        [
            fac.AntdInput(
                id='search',
                mode='search',
                placeholder='请输入公司名称',
                style={
                    'width': '100%'
                }
            ),
            fac.AntdDivider(isDashed=True),
            fac.AntdSpin(
                html.Div(
                    fac.AntdResult(
                        status='info',
                        subTitle='请先进行搜索'
                    ),
                    id='search-result-container',
                    style={
                        'minHeight': '300px'
                    }
                ),
                indicator=fuc.FefferyExtraSpinner(
                    type='flag'
                )
            )
        ],
        style={
            'width': '800px',
            'margin': '0 auto',
            'border': '1px solid rgb(240, 240, 240)',
            'padding': '25px'
        }
    ),
    style={
        'paddingTop': '50px'
    }
)


@app.callback(
    Output('search-result-container', 'children'),
    Input('search', 'nClicksSearch'),
    prevent_initial_call=True
)
def render_search_result(nClicksSearch):

    time.sleep(1)

    return [
        fac.AntdTable(
            columns=[
                {
                    'dataIndex': key,
                    'title': key
                }
                for key in
                mock_data[0].keys()
            ],
            data=mock_data,
            bordered=True
        ),

        # 注入关系图所需数据
        dcc.Store(
            id='graph-mock-data',
            data={
                'mock_graph_nodes': mock_graph_nodes,
                'mock_graph_links': mock_graph_links
            }
        ),

        # 关系图渲染容器
        html.Div(
            id='graph-container',
            style={
                'height': '500px'
            }
        )
    ]


app.clientside_callback(
    ClientsideFunction(
        namespace='clientside',
        function_name='render_graph'
    ),
    Output('graph-container', 'children'),
    Input('graph-mock-data', 'data')
)

if __name__ == '__main__':
    app.run(debug=True)
